<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品列表页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <script type="text/javascript" src="../../script/api.js"></script>
    <style type="text/css">
    body{
      background-color: #fcfcfc;
      height:100%;
    }
    .top{
      width: 100%;height:40px;background-color: #f5f5f5;
      line-height: 40px;
      margin-top: 28px;
    }
    .leftreturn{
      width:25px;
      height:25px;
      margin:7.5px;
      float: left;
    }
.content{
	width:100%;
	height: 400px;
	margin: 0 auto;
	margin-top: 0;
	background: white;
	color:#000000;
	border:0px;
	display: block;
	font-size: 14px;
}
.content-xinxi{
	width:80%;
	height: 300px;
	margin: 0 auto;
  padding: 0px 10%;
	background: white;
	color:#000000;
	border:0px;
	display: block;
	font-size: 17px;
	margin-top: 20px;
	border-bottom: solid;
	border-color: #999999;
}
.content-xinxi img{
  width:80px;
  height: 80px;
  float: left;
  border-radius: 4px;
}

.content-text{
	width:90%;
	height: 30px;
	margin:  auto;
	color:#000000;
	border:1px;
	border-style: solid;
	border-color: #999999;
	display: block;
	font-size: 14px;
	float: left;
}
.button {
	width:80%;
	height: 35px;
	margin: 0 auto;
	margin-top: 20px;
	background: #0082e4;
	color:#FFFFFF;
	font-size: 18px;
	border:0px;
	display: block;
}
    </style>
</head>
<body>
  <div class="top">
    <img src="../../image/leftreturn.png" alt="" class="leftreturn" onclick="returnframe0();">
    <span>商品列表页</span>
  </div>

	<div class="content" id="content"></div>
</body>
<script type="text/javascript" src="../../script/SHA1.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/x-dot-template"id="tmpl-5">
{{ for(var prop in it) { }}
<div class="content-xinxi">
  <div class="picture">
            <a href="#"><img src="{{=it[prop].cimage.url}}"></a>
  </div>
  <div class="content-xinxi1">
  <label for="">名称：</label><label for="">{{=it[prop].cname}}</label><br>
  <label for="">介绍：</label><label for="">{{=it[prop].introduce}}</label><br>
  <label for="">价格：</label><label for="">￥{{=it[prop].cprice}}</label><br>
  {{? it[prop].amount!=null}}
  <label for="">销量：</label><label for="">{{=it[prop].amount}}件</label>
  {{??}}
  <label for="">销量：</label><label for="">0 件</label>
  {{?}}
  <button class="button" onclick="addToShopingCart('{{=it[prop].id}}')">加 入 购 物 车</button>
  </div>
</div>
{{ } }}
</script>
<script type="text/javascript">
      apiready = function() {
        userInfor= $api.getStorage('userInfor');
        db = api.require('db');
        // 获取商品详情数据
        getWareInfo(api.pageParam.variety);

      }

      function getWareInfo(variety){

        var params = {
            fields: {},
            where: {
                variety: variety
            },
            skip: 0,
            limit:40 ,
        }

            //获取X-APICloud-AppKey值
            var now = Date.now();
            appKey = SHA1("A6032422409194"+"UZ"+"808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44"+"UZ"+now)+"."+now
            params = $api.jsonToStr(params);

           api.ajax({
               url: 'http://d.apicloud.com/mcm/api/commodity?filter=' + params,
               method: 'get',
               cache: false,
               headers:{
                 "X-APICloud-AppId": "A6032422409194",
                 "X-APICloud-AppKey": appKey
               }
           },function(ret, err){
               if (ret) {
                  //  alert( JSON.stringify( ret ) );

                   //使用doT模板将用户信息放入html中
                   // 编译模板函数
                   tmpltxt=doT.template(document.getElementById("tmpl-5").innerHTML);//生成模板方法
                   document.getElementById("content").innerHTML=tmpltxt(ret);//数据渲染
               } else {
                   alert('数据库连接失败');
               }
           });


      }

      function addToShopingCart(id_){
        //将商品id放入db数据库

        db.selectSql({
          name: userInfor.id,
          sql: "SELECT * From goods WHERE goodId ='"+id_+"'"
        }, function(ret, err){
        if( ret.data!=''){
                     alert('商品已存在于购物车');
                     api.openWin({
                         name: 'shoppingcart',
                         url: '../my/shoppingcart.html',
                     });
        }else if(ret.data==''){
                  //添加商品至数据库
                 db.executeSql({
                     name: userInfor.id,
                     sql: "INSERT INTO goods (goodId,goodCount) VALUES ('"+id_+"',"+1+")"
                 }, function(ret, err){
                     if( ret.status ){
                         alert('商品已添加至购物车');
                         api.openWin({
                             name: 'index',
                             url: '../my/shoppingcart.html'
                         });
                     }
                 });
             }else if(err){
                    alert("数据库连接失败")
                  }
        });


      }

      function returnframe0() {
        api.closeWin();
      }
</script>
</html>
